<template>
	<view class="content">
		<view class="welcome-box">
			<view class="welcome">
				新蚌壳用户注册
			</view>
		</view>
		<!-- <view class="logo"><image src="../../static/login-registration/logo.png" mode=""></image></view> -->
		<view class="sex-box">
			<radio-group @change="sexChange">
				<label class="radio uni-input"><radio value=0 checked="true" style="transform:scale(0.7)" />男</label>
				<label class="radio uni-input"><radio value=1 style="transform:scale(0.7)" />女</label>
			</radio-group>
		</view>
		
		<view class="uni-form-item uni-column">
			<input type="tel" class="uni-input" name="" v-model="user.userNickname" placeholder="请输入昵称" />
		</view>
		
		<view class="uni-form-item uni-column">
			<input type="password" class="uni-input" name="" v-model="user.userPassword" placeholder="请输入密码" />
		</view>
		
		
		
		
		<view class="uni-form-item uni-column">
			<input type="tel" class="uni-input" name="" v-model="user.userPhone" placeholder="请输入手机号" />
		</view>
		<view class="uni-form-item uni-column column-with-btn">
			<input type="text" v-model="verCode" class="uni-input" maxlength="8" placeholder="请输入右边验证码" />
			<view class="canvas-img-code" @click="refresh">
				<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas" @error="canvasIdErrorCallback"></canvas>
			</view>
		</view>
		
		
		
		<view class="sex-box">
			<radio-group @change="roleChange">
				<label class="radio uni-input"><radio value=0 checked="true" style="transform:scale(0.7)" />普通用户</label>
				<label class="radio uni-input"><radio value=1 style="transform:scale(0.7)" />中介</label>
			</radio-group>
		</view>
		<view class="uni-form-item uni-column">
			<input type="tel" class="uni-input" name="" v-model="user.userName" placeholder="请输入真实姓名" />
		</view>
		<view class="uni-form-item uni-column">
			<input type="tel" class="uni-input" name="" v-model="user.idNumber" placeholder="请输入身份证号" />
		</view>
		
		
		<button type="photoButton" @click="uploadUserPhoto">点击上传头像</button>
		
		<button type="primary" @click="register">注册</button>
		<view class="links">已有账号？<view class="link-highlight" @tap="gotoLogin">点此登陆</view></view>
	</view>
</template>

<script>
	var _this;
	import axios from 'axios'
	import qs from 'qs'
	export default {
		data() {
			return {
				verCode: "", //验证码
				isRotate: false, 
				width: 115,
				height: 40,
				// seconds: 59,
				// codeBtn: {
				// 	text: '获取验证码',
				// 	waitingCode: false,
				// 	count: this.seconds
				// },
				user:{
					userId: null,
					userNickname: "",
					userPassword: "",
					userPhone: "",
					userName: "",
					userSex: 0,
					userPhoto: null,
					idNumber:"",
					userType:0,
					userStatus:1
				}
			}
		},
		onShow() {
			_this = this;
			setTimeout(function() {
				_this.init();
			}, 1000)
		},
		methods: {
			// sendCode: function () {
			// 	this.codeBtn.waitingCode = true;
			// 	this.codeBtn.count = this.seconds;
			// 	this.codeBtn.text = this.codeBtn.count + 's';
				
			// 	let countdown = setInterval( () => {
			// 		this.codeBtn.count--;
			// 		this.codeBtn.text = this.codeBtn.count + 's';
			// 		if( this.codeBtn.count < 0 ){
			// 			clearInterval(countdown);
			// 			this.codeBtn.text = '重新发送';
			// 			this.codeBtn.waitingCode = false;
			// 		}
			// 	},1000);
			// },
			sexChange(data){
				this.user.userSex = data.detail.value
			},
			roleChange(){
				this.user.userType = data.detail.value
			},
			uploadUserPhoto(){
				uni.chooseImage({
					count:1,
					success: (res) => {
						this.user.userPhoto = res.tempFilePaths
					}
				})
			},
			
			register(){
				if (this.verCode.length != 4) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '验证码不正确'
					});
					return false;
				}
				if (this.verCode.toLowerCase() != uni.getStorageSync('imgcode').toLowerCase()) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '验证码不正确'
					});
					return false;
				}
				_this.isRotate = true;
				if(_this.isRotate && this.user.userNickname!=null && this.user.userPassword!=null &&
					this.user.userPhone!=null && this.user.userName!=null){
					
					this.$axios.post('addUser',this.qs.stringify(this.user))
					.then((res)=>{
						console.log(res)
						// console.log(this.user.userPhoto[0])
						if (this.user.userPhoto) {
							uni.uploadFile({
								url: this.baseURL + 'upload/headPhoto',
								filePath: this.user.userPhoto[0],
								name: 'headPhoto',
								formData: {
									'userId': res.data.userId
								},
								success: (uploadFileRes) => {
									console.log(uploadFileRes);
									uni.showToast({
										title:"注册成功!",
										duration:1000
									})
									uni.navigateTo({
										url:"/pages/mine/regisOK"
									})
								},
								fail: e => {
									console.log(e)
									uni.showToast({
										title:"注册失败!",
										duration:1000
									})
								}
							})
						}
					})
					.catch((e)=>{
						console.log(e)
					})
				}
			},
			
			gotoLogin(){
				uni.navigateTo({
					url:"/pages/mine/login"
				})
			},
			// 初始化验证码
			init: function() {
				console.log('start');
				var context = uni.createCanvasContext('imgcanvas', this),
					w = this.width,
					h = this.height;
				context.setFillStyle("white");
				context.setLineWidth(5);
				context.fillRect(0, 0, w, h);
				var pool = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "I", "M", "N", "O", "P", "Q", "R", "S",
						"T", "U", "V", "W", "S", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
					],
					str = '';
				for (var i = 0; i < 4; i++) {
					var c = pool[this.rn(0, pool.length - 1)];
					var deg = this.rn(-30, 30);
					context.setFontSize(18);
					context.setTextBaseline("top");
					context.setFillStyle(this.rc(80, 150));
					context.save();
					context.translate(30 * i + 15, parseInt(h / 1.5));
					context.rotate(deg * Math.PI / 180);
					context.fillText(c, -15 + 5, -15);
					context.restore();
					str += c;
				}
				uni.setStorage({
					key: 'imgcode',
					data: str,
				});
				for (var i = 0; i < 40; i++) {
					context.beginPath();
					context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
					context.closePath();
					context.setFillStyle(this.rc(150, 200));
					context.fill();
				}
				context.draw();
				console.log('end');
			},
			rc: function(min, max) {
				var r = this.rn(min, max);
				var g = this.rn(min, max);
				var b = this.rn(min, max);
				return "rgb(" + r + "," + g + "," + b + ")";
			},
			rn: function(max, min) {
				return parseInt(Math.random() * (max - min)) + min;
			},
			refresh: function() {
				this.init();
			},
			canvasIdErrorCallback: function(e) {
				console.error(e.detail.errMsg)
			}
		},
	}
</script>

<style lang="scss" scoped>
$color-primary: #3881ce;
.content{
	padding: 60upx 100upx 100upx;
}
.welcome-box{
	width: 100%;
	height: 50px;
	margin-top: 20px;
	margin-bottom: 10px;
	text-align: center;
}	
.welcome{
	text-align: center;
	width: 100%;
	height: 50px;
	line-height: 50px;
	font-size: 22px;
	color: #555555;
}
.logo{
    text-align: center;
	image{
	    height: 200upx;
	    width: 200upx;
	    margin: 0 0 40upx;
	}
}
.uni-form-item{
	margin-bottom: 40upx;
	padding: 0;
	border-bottom: 1px solid #e3e3e3;
	.uni-input{
		font-size: 30upx;
		padding: 7px 0;
	}
}
.sex-box{
	margin-bottom: 40upx;
	padding: 0;
	.uni-input{
		font-size: 30upx;
		padding: 7px 0;
	}
}
.column-with-btn{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	button{
		font-size: 24upx;
		margin: 0;
		width: 180upx;
		text-align: center;
		&:after{
			border: none
		}
		&.active{
			background-color: $color-primary;
			color: $uni-text-color-inverse;
		}
	}
}
.img-captcha{
	width: 150upx;
	height: 60upx;
}
button[type="primary"]{
	background-color: $color-primary;
	border-radius: 0;
	font-size: 34upx;
	margin-top: 60upx;
}
button[type="photoButton"]{
	background-color: #F1F1F1;
	border-radius: 0;
	font-size: 34upx;
	margin-top: 20upx;
}
.links{
	text-align: center;
	margin-top: 40upx;
	font-size: 26upx;
	color: #999;
	view{
		display: inline-block;
		vertical-align: top;
		margin: 0 10upx;
	}
}
.link-highlight{
	color: $color-primary
}
.codeView {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.canvas-img-code {
	background-color: #dddddd;
	display: inline-block;
}
</style>
